<template>
  <div class="list-container">
    <!-- <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label-width="120px" label="输入搜索：">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div class="table-panel">
      <el-row class="table-operate">
        <!-- <el-button v-if="companyId" type="primary" @click="submit">
          提交 <i class="el-icon-upload2" />
        </el-button> -->
        <el-date-picker
          @change="changeMonth"
          v-model="searchForm.date"
          type="month"
          placeholder="选择出勤时间"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <!-- <el-tag>如果是劳务公司进来就只要所在劳务公司显示，如果是项目方进来就可以看到tree</el-tag> -->
        <el-button
          @click.native.prevent="removeRows()"
          type="primary"
          v-if="companyId != null"
          >批量提交</el-button
        >
        <el-button type="primary" @click="addMonthlyWage">新增月工资</el-button>
      </el-row>
      <el-row>
        <el-col :span="5" style="border-right:1px solid #e8e8e8">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-col>
        <el-col :span="19">
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              align="center"
              :selectable="selectEnable"
            />
            <el-table-column
              align="center"
              type="index"
              width="55"
              label="序号"
            >
            </el-table-column>
            <el-table-column align="center" prop="personName" label="姓名">
            </el-table-column>
            <el-table-column align="center" prop="attendanceDays" label="总出勤">
              <template slot-scope="scope">
                <div>{{ scope.row.attendanceDays }}天</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="referenceMonthlyWage"
              width="100px"
              label="参考工资"
            >
              <template slot-scope="scope">
                <div>￥{{ scope.row.referenceMonthlyWage }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="actualMonthlyWage"
              width="100px"
              label="实际工资"
            >
              <template slot-scope="scope">
                <div>￥{{ scope.row.actualMonthlyWage }}</div>
              </template>
            </el-table-column>
            <el-table-column label="奖金" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.bonus }}</div>
              </template>
            </el-table-column>
            <el-table-column label="罚款" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.fine }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="审核状态"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              min-width="150"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="checkRow(scope.row, scope.$index)"
                  type="text"
                  icon="el-icon-edit"
                  >查看</el-button
                >
                <el-button
                  @click.native.prevent="editRow(scope.row, scope.$index)"
                  type="text"
                  icon="el-icon-edit"
                  :disabled="
                    scope.row.status == '未提交' ||
                    scope.row.status == '已驳回' ||
                    scope.row.status == '已撤回'
                      ? false
                      : true
                  "
                  >调整</el-button
                >
                <!-- <el-button
                  @click.native.prevent="deleteRow(scope.row)"
                  type="text"
                  icon="el-icon-delete"
                  v-if="companyId != null"
                  :disabled="
                    scope.row.status == '未提交' ||
                    scope.row.status == '已驳回' ||
                    scope.row.status == '已撤回'
                      ? false
                      : true
                  "
                  >删除</el-button
                > -->
                <el-button
                  @click.native.prevent="confirmRow(scope)"
                  type="text"
                  icon="el-icon-circle-check"
                  v-if="companyId != null"
                  :disabled="
                    scope.row.status == '未提交' ||
                    scope.row.status == '已驳回' ||
                    scope.row.status == '已撤回'
                      ? false
                      : true
                  "
                  >提交确认</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / searchForm.pageSize) }}页/{{
            totalData
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="searchForm.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>

    <!--只有未提交状态才能调整-->
    <el-dialog
      class="small-dialog"
      width="600px"
      title="调整月工资"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="dialogForm"
        :inline="true"
        label-width="100px"
        style="text-align: center"
      >
        <!-- <div class="tag">实际工资</div> -->
        <div class="inline-form">
          <el-form-item label="实际工资：">
            <el-input v-model="dialogForm.actualMonthlyWage"></el-input>
          </el-form-item>
          <el-form-item label="奖金：">
            <el-input v-model="dialogForm.bonus"></el-input>
          </el-form-item>
          <el-form-item label="罚款：">
            <el-input v-model="dialogForm.fine"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDialog()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="small-dialog"
      width="600px"
      title="新增月工资"
      :visible.sync="addMonthlyWageShow"
    >
      <el-form
        style="width: 350px; margin: 0 auto"
        :model="newWageForm"
        :rules="newWageFormRule"
      >
      <el-form-item v-if="companyId == null" label="选择劳务公司" label-width="110px" required>
          <el-select
            style="width: 220px"
            v-model="newWageForm.serviceCorporationId"
            placeholder="请选择劳务公司"
            @change="getTeamList"
          >
            <el-option
              v-for="item in serviceCorporationList"
              :key="item.serviceCorporationId"
              :label="item.name"
              :value="item.serviceCorporationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择班组" label-width="110px" required>
          <el-select
            style="width: 220px"
            v-model="newWageForm.teamId"
            placeholder="请选择班组"
            @change="getTeamId"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择人员" label-width="110px" required>
          <el-select
            style="width: 220px"
            v-model="newWageForm.personId"
            placeholder="请选择人员"
          >
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期" label-width="110px" required>
          <el-date-picker
            style="width: 220px"
            value-format="yyyy-MM"
            v-model="newWageForm.date"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="实际工资"
          label-width="110px"
          prop="actualMonthlyWage"
        >
          <el-input
            style="width: 220px"
            v-model.number="newWageForm.actualMonthlyWage"
          ></el-input>
        </el-form-item>
        <el-form-item label="奖金" label-width="110px" prop="bonus">
          <el-input
            style="width: 220px"
            v-model.number="newWageForm.bonus"
          ></el-input>
        </el-form-item>
        <el-form-item label="罚款" label-width="110px" prop="fine">
          <el-input
            style="width: 220px"
            v-model.number="newWageForm.fine"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="实发工资"
          label-width="110px"
          prop="shouldIssuedMonthlyWage"
        >
          <el-input
            style="width: 220px"
            v-model.number="newWageForm.shouldIssuedMonthlyWage"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addMonthlyWageShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddMonthlyWage"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTree, getPersonByTeamId } from "@/api/worker";
import corp from "@/api/corp";
import { laborDistList, fineAndBonus, insertMonthlyWage } from "@/api/wage";
import workflowApi from "@/api/workflow/workFlow";
import team from "@/api/team";
export default {
  data() {
    return {
      //页面
      companyId: localStorage.getItem("companyId"),
      totalData: 0,
      //tree
      flag: 1, //1--一级劳务公司，0--二级班组
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //table
      searchForm: {
        currentPage: 1,
        date: this.$route.query.date,
        endDate: null,
        pageSize: 10,
        serviceCorporationId: null,
        startDate: null,
        teamId: null,
      },
      workflowType: "工资审批",
      workflowId: "",
      tableData: [],
      //调整弹窗
      dialogFormVisible: false,
      dialogForm: {},
      // 新增工资弹窗
      addMonthlyWageShow: false,
      newWageForm: {
        date:this.$route.query.date,
        bonus:0,
        fine:0
      },
      newWageFormRule: {
        actualMonthlyWage: [
          { required: true, message: "请输入实际工资", trigger: "blur" },
          {
            type: "number",
            message: "工资金额只能是数字",
            trigger: "blur",
          },
        ],
        bonus: [
          // { required: true, message: "请输入奖金", trigger: "blur" },
          {
            type: "number",
            message: "奖金只能是数字",
            trigger: "blur",
          },
        ],
        fine: [
          // { required: true, message: "请输入罚款", trigger: "blur" },
          {
            type: "number",
            message: "罚款只能是数字",
            trigger: "blur",
          },
        ],
        shouldIssuedMonthlyWage: [
          { required: true, message: "请输入实发工资", trigger: "blur" },
          {
            type: "number",
            message: "实发工资金额只能是数字",
            trigger: "blur",
          },
        ],
      },
      teamList: [],
      personList: [],
      serviceCorporationList:[],
      messageForm: "",
      //流程
      workForm: {
        type: "",
        applyNodeId: "",
        examineReason: "",
        workflowNodeList: [],
        currentWorkflowNode: {},
      },
      finishStatus: "success",
      processStatus: "process",
      stepIndex: 2,
      workflowApplyId: null,
      multipleSelection: [],
      CompanyApplyList: [],
    };
  },
  async created() {
    this.getWorkflowId();
    this.getTreeData();
    await this.initCompanyApplyList();
    await this.getTableData();
    this.searchForm.date = this.$route.query.date;
    var workflowApplyId = this.$route.query.workflowApplyId;
    if (workflowApplyId) {
      this.workflowApplyId = workflowApplyId;
      this.getTableListExamineWorkflowApply();
    }
  },
  methods: {
    selectEnable(row) {
      if(row.status == '未提交' || row.status == '已驳回' || row.status == '已撤回'){
        return true;
      }else return false

      // if(this.companyId){//劳务公司进来
      //   if(row.teamLeaderConfirm){
      //     return true
      //   }else return false
      // }else{//项目方进来
      //   if(row.companyConfirm){
      //     return true
      //   }else return false
      // }
    },
    getWorkflowId() {
      // workflowApi.getWorkflowId(this.workflowType).then((res) => {
      //   console.log("----------------------getWorkflowId");
      //   console.log(res);
      //   this.workflowId = res.data.workflowId;
      // });
      workflowApi.getWorkflowList(this.workflowType).then(res => {
        this.workflowId = res.data.workflows[0].workflowId
      })
    },
    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    removeRows() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要提交的记录!",
        });
        return;
      }
      this.$confirm(
        "此操作将一起提交这些人的月工资给与工人查看, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.workflowId === null) {
            //无工资审批流程 请先联系管理员定义 相关流程
            this.$message({
              message: "无工资审批流程，请先联系管理员定义相关流程",
              type: "warning",
            });
          } else {
            var affairsApplyWorkflowVo = {};
            affairsApplyWorkflowVo.workflowId = this.workflowId;
            affairsApplyWorkflowVo.companyId = this.companyId;
            var tempExamineId = [];
            this.multipleSelection.forEach((item) => {
              var examineId = {
                workerId: item.personId,
                workerLeaderId: item.teamLeaderId,
                attendanceTime: this.searchForm.date,
                personName: item.personName,
                attendanceDays: item.attendanceDays,
                referenceMonthlyWage: item.referenceMonthlyWage,
                actualMonthlyWage: item.actualMonthlyWage,
                bonus: item.bonus,
                fine: item.fine,
              };
              tempExamineId.push(examineId);
            });
            affairsApplyWorkflowVo.examineIds = tempExamineId;
            // 调用api

            workflowApi
              .applyWorkflowApply(affairsApplyWorkflowVo)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "提交月工资成功!",
                });
                this.$router.push("/wage/month/submited");
              })
              .catch((res) => {
                this.$message({
                  type: "info111",
                  message: res,
                });
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    confirmRow(res) {
      var affairsApplyWorkflowVo = {};
      console.log(this.workflowId);
      if (this.workflowId === null) {
        //无 工资审批流程 请先联系管理员定义 相关流程
        this.$message({
          message: "无工资审批流程，请先联系管理员定义相关流程",
          type: "warning",
        });
      } else {
        // affairsApplyWorkflowVo.workflowId = "1429338255930249216"
        // affairsApplyWorkflowVo.companyId=this.companyId
        affairsApplyWorkflowVo.workflowId = this.workflowId;
        affairsApplyWorkflowVo.companyId = this.companyId;
        affairsApplyWorkflowVo.examineIds = [
          {
            workerId: res.row.personId,
            workerLeaderId: res.row.teamLeaderId,
            attendanceTime: this.searchForm.date,
            personName: res.row.personName,
            attendanceDays: res.row.attendanceDays,
            referenceMonthlyWage: res.row.referenceMonthlyWage,
            actualMonthlyWage: res.row.actualMonthlyWage,
            bonus: res.row.bonus,
            fine: res.row.fine,
          },
        ];
        this.$confirm(
          "是否确认" +
            res.row.personName +
            "的工资表，确认提交后将交由部门主管审核！",
          "月工资提交审核",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            workflowApi
              .applyWorkflowApply(affairsApplyWorkflowVo)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "月工资提交成功!",
                });
                this.$router.push("/wage/month/submited");
              })
              .catch((res) => {
                this.$message({
                  type: "info",
                  message: res,
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消确认",
            });
          });
      }
    },
    async initCompanyApplyList() {
      let corporationId;
      if (localStorage.getItem("companyId") != null) {
        /*
           说明是劳务公司人员进来
         */
        corporationId = localStorage.getItem("companyId");
      } else {
        /*
           说明是项目方人员进来  默认不传值 在左边选择树以后才有选择项目公司后才传值
         */
        corporationId =
          this.searchForm.serviceCorporationId == null
            ? 0
            : this.searchForm.serviceCorporationId;
      }
      if (corporationId != 0) {
        await workflowApi.getCompanyApplyList(corporationId).then((res) => {
          this.CompanyApplyList = res.data.affairsApplyWorkflowCompanyList;
          // console.log("getCompanyApplyList成功后的");
          // console.log(this.CompanyApplyList);
        });
      }
    },
    // 获取劳务公司、班组树形数据
    getTreeData() {
      console.log("getTreeData");
      var id = this.companyId;
      if (this.companyId == 0) id = null;
      getTree(id).then((res) => {
        this.treeData = res.data.data;
      });
    },
    onSubmit() {},
    //   页面大小
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getTableData();
    },
    //更改当前页
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
      this.getTableData();
    },
    //发送请求获取表格数据
    async getTableData() {
      // 根据班组id查询班组人员————选择班组
      await laborDistList(this.searchForm).then((res) => {
        if (JSON.stringify(res.data) != "{}") {
          this.tableData = res.data.data.records;
          var that = this;
          this.tableData.forEach(function (item, index) {
            var hasMonth = false;
            that.CompanyApplyList.forEach(function (company) {
              if (
                that.searchForm.date === company.applyWageMonth.slice(0, 7) &&
                item.personId === company.personId
              ) {
                hasMonth = true;
                item.status = that.convertStatus(
                  company.affairsApplyWorkflowStatus
                );
                item.workflowApplyId = company.affairsApplyWorkflowId;
              }
            });
            if (!hasMonth) {
              item.status = "未提交";
            }
          });
          this.totalData = res.data.data.total;
        }
      });
    },
    // 树状图
    async handleNodeClick(res) {
      if (res.children == null) {
        this.flag = 0;
        this.searchForm.teamId = res.id;
        //this.searchForm.serviceCorporationId = null;
        await this.initCompanyApplyList();
        await this.getTableData();
      } else {
        this.flag = 1;
        this.searchForm.serviceCorporationId = res.id;
        this.searchForm.teamId = null;
        await this.initCompanyApplyList();
        await this.getTableData();
      }
    },
    //查看
    checkRow(row) {
      this.$router.push({
        path: "/wage/month/listDetail",
        query: {
          personId: row.personId,
          date: this.searchForm.date,
          workflowApplyId: row.workflowApplyId,
        },
      });
    },
    //调整
    editRow(res, index) {
      this.dialogForm = {
        fine: res.fine,
        bonus: res.bonus,
        personId: res.personId,
        actualMonthlyWage: res.actualMonthlyWage,
      };
      this.dialogFormVisible = true;
    },
    confirmDialog() {
      this.dialogFormVisible = true;
      const data = {
        actualMonthlyWage: this.dialogForm.actualMonthlyWage,
        bonus: this.dialogForm.bonus,
        date: this.searchForm.date,
        fine: this.dialogForm.fine,
        personId: this.dialogForm.personId,
      };
      fineAndBonus(data)
        .then((res) => {
          this.dialogFormVisible = false;
          this.getTableData();
        })
        .catch((res) => {
          console.log(res);
        });
    },
    deleteRow(res) {
      this.$confirm("是否确认删除月工资?", "月工资删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    changeMonth(row) {
      this.searchForm.date = row;
      this.getTableData();
    },
    getTableListExamineWorkflowApply() {
      // console.log("workflowApplyId", this.workflowApplyId);
      workflowApi
        .getWorkflowApplyInfo({ applyId: this.workflowApplyId })
        .then((res) => {
          // console.log(res);
          this.workForm = res.data;
        });
    },
    getCurrentActive(workflowNodeList, currentWorkflowNode) {
      let active = 0;
      let processStatus = "success";
      let that = this;
      workflowNodeList.forEach(function (element, index) {
        if (currentWorkflowNode !== null) {
          if (element.applyNodeId === currentWorkflowNode.applyNodeId) {
            active = index;
            that.workForm.applyNodeId = element.applyNodeId;
            processStatus = "process";
          }
        } else {
          if (element.workflowNodeStatus === "3") {
            active = index;
            processStatus = "error";
          } else if (element.workflowNodeStatus === "2") {
            active = index;
            processStatus = "success";
          }
        }
      });
      this.processStatus = processStatus;
      return active;
    },
    convertStatus(status) {
      let newStatus = "未知";
      switch (status) {
        case "1":
          newStatus = "待审核";
          break;
        case "2":
          newStatus = "审核中";
          break;
        case "3":
          newStatus = "已审核";
          break;
        case "4":
          newStatus = "已驳回";
          break;
        case "5":
          newStatus = "已撤回";
          break;
      }
      return newStatus;
    },
    // 添加月工资
    addMonthlyWage() {
      this.addMonthlyWageShow = true;
      if(localStorage.getItem("companyId")==null){
        corp.listByProjectId({
          pageSize:100
        }).then(res=>{
          this.serviceCorporationList = res.data.data.records
        })
      }else{
        this.newWageForm.serviceCorporationId = localStorage.getItem("companyId")
        this.getTeamList()
      }

    },
    getTeamList(){
      team
        .list({
          serviceCorporationId: this.newWageForm.serviceCorporationId,
          pageSize: 100,
          currentPage: 1,
        })
        .then((res) => {
          this.teamList = res.data.data.records;
          delete this.newWageForm.teamId
        });
    },
    getTeamId() {
      getPersonByTeamId({
        pageSize: 100,
        team_id: this.newWageForm.teamId,
      }).then((res) => {
        this.personList = res.data.data.records;
        delete this.newWageForm.personId
      });
    },
    checkWageForm() {
      // console.log("teamId",this.newWageForm.teamId);
      if (this.newWageForm.teamId == undefined) {
        this.messageForm = "请选择班组";
        return false;
      } else if (this.newWageForm.personId == undefined) {
        this.messageForm = "请选择人员";
        return false;
      } else if (this.newWageForm.date == undefined) {
        this.messageForm = "请选择日期";
        return false;
      } else if (
        this.newWageForm.actualMonthlyWage == undefined ||
        this.newWageForm.actualMonthlyWage == ""
      ) {
        this.messageForm = "请输入实际工资";
        return false;
      } else if (!/^[0-9]*$/.test(this.newWageForm.actualMonthlyWage)) {
        this.messageForm = "实际工资必须是数字";
        return false;
      // } else if (
      //   this.newWageForm.bonus == undefined ||
      //   this.newWageForm.bonus == ""
      // ) {
      //   this.messageForm = "请输入实际工资";
      //   return false;
      // } else if (!/^[0-9]*$/.test(this.newWageForm.fine)) {
      //   this.messageForm = "请输入实际工资";
      //   return false;
      // } else if (
      //   this.newWageForm.fine == undefined ||
      //   this.newWageForm.fine == ""
      // ) {
      //   this.messageForm = "请输入实际工资";
      //   return false;
      // } else if (!/^[0-9]*$/.test(this.newWageForm.fine)) {
      //   return false;
      } else if (
        this.newWageForm.shouldIssuedMonthlyWage == undefined ||
        this.newWageForm.shouldIssuedMonthlyWage == ""
      ) {
        this.messageForm = "请输入实发工资";
        return false;
      } else if (!/^[0-9]*$/.test(this.newWageForm.shouldIssuedMonthlyWage)) {
        this.messageForm = "实发工资必须是数字";
        return false;
      } else {
        return true;
      }
    },
    confirmAddMonthlyWage() {

      // console.log(this.newWageForm);
      if (this.checkWageForm()) {
        insertMonthlyWage({
          actualMonthlyWage: this.newWageForm.actualMonthlyWage,
          bonus: this.newWageForm.bonus,
          date: this.newWageForm.date,
          fine: this.newWageForm.fine,
          personId: this.newWageForm.personId,
          shouldIssuedMonthlyWage: this.newWageForm.shouldIssuedMonthlyWage,
        }).then(res => {
          if (res.success) {
            this.$message.success("添加成功");
            this.addMonthlyWageShow = false;
            this.getTableData();
            this.newWageForm = {};
          }
        }).catch(err=>{
            this.$message.error('人员月工资已存在')
        })
      }else{
        this.$message.error(this.messageForm)
      }
    },
  },
};
</script>
